<template>
	<view>
		<uni-row :gutter="20">
			<uni-col :span="16">
				<uni-easyinput v-model="verify_code" :maxlength="6" placeholder="请输入验证码" @input="changeCode"/>
			</uni-col>
			<uni-col :span="8">
				<button class="send-button" size="mini" plain @click="handleSendCode">{{sendCodeStatus ? (time >= 10 ? time : '0' + time) + 's' : '发送'}}</button>
			</uni-col>
		</uni-row>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				verify_code: '',
				sendCodeStatus: false,
				time: 60,
				timer: '',
			}
		},
		props: {
			trade_type: {
				type: String,
				default: '0'
			},
			
			mobile: {
				type: String,
				default: "",
				required: true
			},
			
			card_name: {
				type: String,
				default: "",
				required: true
			},
			
			id_no: {
				type: String,
				default: "",
				required: true
			},
			
			card_no: {
				type: String,
				default: "",
				required: true
			},
			
			account_no: {
				type: String,
				default: ""
			},
			
			amount: {
				type: String,
				default: "0"
			}
		},
		methods: {
			handleSendCode() {
				if(this.sendCodeStatus) {
					return;
				}
				
				if(this.mobile == "") {
					uni.showToast({
						icon: 'error',
						title: '请填写手机号码'
					})
					return;
				}
				
				if(this.card_name == "") {
					uni.showToast({
						icon: 'error',
						title: '请先填写表单'
					})
					return;
				}
				
				if(this.id_no == "") {
					uni.showToast({
						icon: 'error',
						title: '请填写证件号码'
					})
					return;
				}
				
				if(this.card_no == "") {
					uni.showToast({
						icon: 'error',
						title: '请填写银行卡号'
					})
					return;
				}
				
				if(this.trade_type === '4' && this.account_no == "") {
					uni.showToast({
						icon: 'error',
						title: '请填写户号'
					})
					return;
				}
				
				if((this.trade_type === '3' || this.trade_type === '7' )) {
					if (this.amount <= 0) {
						uni.showToast({
							icon: 'error',
							title: '请填写正确金额'
						})
						return;
					}
				}
				
				this.sendCodeStatus = true
				
				this.timer = setInterval( () => {
					if(this.time > 1) {
						this.time -= 1
					} else {
						this.sendCodeStatus = false
						this.time = 60
						clearInterval(this.timer)
					}
				}, 1000)
				
				this.sendSmsCode()
			},
			
			changeCode( e ) {
				this.$emit('input', e)
			},
			
			sendSmsCode() {
				let data = {
					card_no: this.card_no,
					card_name: this.card_name,
					id_no: this.id_no,
					mobile: this.mobile,
					trade_type: this.trade_type
				}
				
				if(this.trade_type === '4') {
					data.account_no = this.account_no
				}
				
				if(this.trade_type === '3' || this.trade_type === '7') {
					data.amount = this.amount
					data.account_no = this.account_no
				}
				
				uni.showLoading({
					title: '发送中...',
						mask: true
				})
				uni.request({
					url: "/util/sendSmsCode",
					data,
					success: (res) => {
						if(res.data.success) {
							this.$emit('onSend', {trade_no:res.data.data.trade_no, verify_code: this.verify_code})
							uni.showToast({
								icon: 'success',
								title: '发送成功'
							})
						} else {
							uni.showToast({
								icon: 'error',
								title: res.data.errMessage
							})
						}
					},
					complete: () => {
						uni.hideLoading()
					}
				})
			}
		}
	}
</script>


<style lang="scss" scoped>
	.send-button {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 70rpx;
		margin-left: 20rpx;
		border: 1px solid #00aaff;
		color: #00aaff;
	}
	
</style>